<template>
	<view class="vf-img-box" :style="{width: width+'rpx', height: height+'rpx'}">
		<image class="vf-img" v-if="!isload" :class="{none: isload}" :src="defSrc" mode="aspectFill" :lazy-load="true" :style="{width: width+'rpx', height: height+'rpx'}"></image>
		<image class="vf-img vf-img1" :class="{none: !isload}" :src="src" :mode="mode" @load="load" :lazy-load="true" @error="error" :style="{width: width+'rpx', height: height+'rpx'}"></image>
	</view>
</template>

<script>
	export default {
		props: {
			src: {
				type: String,
				default: ''
			},
			mode: {
				type: String,
				default: 'scaleToFill'
			},
			width: {
				type: [String, Number],
				default: 300
			},
			height: {
				type: [String, Number],
				default: 300
			}
		},
		data() {
			return {
				defSrc: '/static/zhongyiyao/book.png',
				isload: false,
			};
		},
		methods:{
			load() {
				this.isload = true;
			},
			error() {
				this.isload = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
.vf-img-box{
	position: relative;
}
.vf-img{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.vf-img1{
	z-index: 2;
}
</style>
